<template>
  <div id="app">
    <SonCom />
  </div>
</template>

<script>
import SonCom from './components/SonCom.vue'
export default {
  // 1. 组件的数据 写成 function+return {}格式
  data () {
    return {
      isShow: false
    }
  },
  // 2. 方法 内部可以通过this 访问数据，也可以通过this调用方法
  methods: {},
  // 3. 计算属性 某个值需要基于数据计算而来，可以用它
  // 有缓存，只有在内部的依赖（数据）改变时，才会触发
  // 大部分时候写get即可
  // 全选反选时可能需要用到 set
  computed: {
    som: {
      get () {},
      set (val) {}
    }
  },
  // 4. 局部注册组件
  components: {
    SonCom // ES6的简写 SonCom:SonCom
    // 左 SonCom ，属性名
    // 右SonCOm，变量
  },
  // 5. 侦听器 ，数据改变希望执行逻辑，可以用它
  // 数据的改变，可能有，新增，修改，删除
  watch: {
    isShow: {
      deep: true, // 深度侦听，复杂类型的内部属性改变，可能需要用这个
      immediate: true, // 是否立刻执行，
      handler () {} // 逻辑
    }
  }
}
</script>

<style></style>
